<template>
	<div class="realtimeIndexContent">
		<div class="strategyMenus">
			<div class="strategyMenusBut">
				<!-- <wj-Button type="save" @click="handleAll_delete">批量删除</wj-Button> -->
				<!-- <wj-Button type="save" @click="handleAll_read">标记已读</wj-Button> -->
				<!-- <wj-Button type="save">标记未读</wj-Button> -->
				<!-- <wj-Button type="save" @click="handleExport_select">批量导出</wj-Button> -->
				<el-date-picker
					v-model="exportLogsTimeHorizonValue"
					:picker-options="pickerOptions"
					format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="selectExportLogsTimeHorizonValueEvent"
				>
				</el-date-picker>
				<!-- <wj-Button type="save" @click="handleExport_all">全部导出</wj-Button> -->
				<wj-Button type="save" @click="handleExport">导出</wj-Button>
			</div>
			<div class="strategyMenusSearch">
				<el-input
					placeholder="请输关键字检索"
					type="text"
					v-model="searchValue"
					@keyup.enter.native="
						(e) => {
							e.target.blur();
						}
					"
					@blur="searchEvent"
				></el-input>
			</div>
		</div>
		<div class="strategyList">
			<el-table
				:data="tableData"
				ref="table_publishContent"
				style="width: 100%"
				@selection-change="handleSelectionChange"
				:cell-class-name="tableCellClassName"
				:row-class-name="'tableRowClassName'"
				:row-key="getRowKeys"
			>
				<el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
				<el-table-column prop="terminalName" label="前置装置" width="180" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="status" label="消息状态" width="180">
					<template slot-scope="scope">
						<span v-if="scope.row.status == 0">{{ "未读" }}</span>
						<span v-if="scope.row.status == 1">{{ "已读" }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="告警类别" width="180">
					<template slot-scope="scope">
						<span v-if="scope.row.type == 1">{{ "内容" }}</span>
						<span v-if="scope.row.type == 2">{{ "运维" }}</span>
						<span v-if="scope.row.type == 3">{{ "监控" }}</span>
					</template> </el-table-column
				>s
				<el-table-column prop="content" label="告警内容" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-image
							v-if="scope.row.subType === '15' || scope.row.subType === 15"
							style="width: 24px; height: 24px; margintop: 7px"
							fit="cover"
							:src="scope.row.imagePateStr"
							:preview-src-list="[scope.row.imagePateStr]"
						>
							<div slot="error">
								<i class="wj-icon-24gl-pictureSplit"></i>
							</div>
						</el-image>
						<span slot-scope="scope" v-else>
							{{ scope.row.content }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="internalNumber" label="公桩号" width="180"> </el-table-column>
				<el-table-column prop="warningTime" label="告警时间" width="180"> </el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<!-- <el-link type="primary" v-if="scope.row.status == 0" @click="handleRead(scope.$index, scope.row)">标记已读</el-link> -->
						<!-- <el-link type="primary" v-if="scope.row.status == 1" @click="handleUnread(scope.$index, scope.row)">标记未读</el-link> -->
						<el-link type="primary" @click="handleDetails(scope.$index, scope.row)">详情</el-link>
						<!-- <el-link type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-link> -->
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="strategyPage">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[11]"
				:page-size="pageSize"
				layout="total, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</div>
		<!-- 自定义alertBox弹框——详情 -->
		<AlertBox :alertBoxVisible="alertBoxFormVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>告警信息详情</p>
					<i class="wj-icon-guanbi" @click="alertBoxFormclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_details">
						<span>告警类别</span>
						<span>{{ realtimeDetails.realtimeType }}</span>
					</div>
					<div class="infoRow_details">
						<span>告警内容</span>
						<template>
							<el-image
								v-if="realtimeDetails.subType === '15' || realtimeDetails.subType === 15"
								style="width: 36px; height: 36px"
								fit="cover"
								:src="realtimeDetails.imagePateStr"
								:preview-src-list="[realtimeDetails.imagePateStr]"
							>
								<div slot="error">
									<i class="wj-icon-24gl-pictureSplit"></i>
								</div>
							</el-image>

							<span v-else>
								{{ realtimeDetails.realtimeContent }}
							</span>
						</template>
					</div>
					<div class="infoRow_details">
						<span>告警时间</span>
						<span>{{ realtimeDetails.realtimeTime }}</span>
					</div>
					<div class="infoRow_details">
						<span>告警设备</span>
						<span class="infoRow_details-span">{{ realtimeDetails.realtimeTerminal }}</span>
					</div>
					<div class="infoRow_details">
						<span>公桩号</span>
						<span>{{ realtimeDetails.internalNumber }}</span>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" @click="handleDetailsConfirm">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import { realtime_all, realtime_read, realtime_delete, realtime_all_delete, realtime_all_read, realtime_export } from "@/utils/request/api";
export default {
	name: "RealtimeIndex",
	data() {
		return {
			// 搜索
			searchValue: "",
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 表格数据
			tableData: [],
			multipleSelection: [],
			// 自定义弹窗控制——详情
			alertBoxFormVisible: false,
			// 实时告警详情
			realtimeDetails: {
				realtimeType: "",
				realtimeContent: "",
				realtimeTime: "",
				realtimeTerminal: "",
				internalNumber: "",
				imagePateStr: "",
				subType: "",
			},
			exportLogsTimeHorizonValue: [], // 导出日志时间范围
			pickerOptions: {
				disabledDate(time) {
					// 禁止选择未来的时间
					return (time.getTime() - (24 * 60 * 60 * 1000)) > Date.now();
				},
			},
		};
	},
	created() {},
	mounted() {
		this.getAllRealtime(this.pageNum, this.pageSize, "", "");
	},
	methods: {
		// 时间控件事件
		selectExportLogsTimeHorizonValueEvent(date) {
			console.log(date);
			if (date != null && date != undefined && date.length > 0) {
				this.getAllRealtime(this.pageNum, this.pageSize, date[0], date[1]);
			} else {
				this.getAllRealtime(this.pageNum, this.pageSize, "", "");
			}
		},
		// table行数据的 Key （用来缓存选中数据）
		getRowKeys(row) {
			return row.id;
		},
		// 搜索
		searchEvent() {
			console.log(this.searchValue);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.getSearchRealtime(this.pageNum, this.pageSize, this.searchValue, "", "");
			this.searchValue = "";
		},
		// 分页组件事件
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			if (this.searchValue != "" && this.exportLogsTimeHorizonValue.length <= 0) {
				this.getSearchRealtime(val, this.pageSize, this.searchValue, "", "");
			} else if (this.searchValue != "" && this.exportLogsTimeHorizonValue.length > 0) {
				this.getSearchRealtime(
					val,
					this.pageSize,
					this.searchValue,
					this.exportLogsTimeHorizonValue[0],
					this.exportLogsTimeHorizonValue[1]
				);
			} else if (this.exportLogsTimeHorizonValue.length > 0) {
				this.getAllRealtime(val, this.pageSize, this.exportLogsTimeHorizonValue[0], this.exportLogsTimeHorizonValue[1]);
			} else {
				this.getAllRealtime(val, this.pageSize, "", "");
			}
		},
		// 表格选中
		handleSelectionChange(val) {
			this.multipleSelection = val;
			console.log(this.multipleSelection);
		},
		// 标记已读
		handleRead(index, row) {
			console.log(index, row);
			realtime_read({
				id: row.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("实时告警标记已读成功！");
					this.getAllRealtime(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("实时告警标记已读失败！");
				}
			});
		},
		// 标记未读
		handleUnread(index, row) {
			console.log(index, row);
		},
		// 详情
		handleDetails(index, row) {
			console.log(index, row);
			this.alertBoxFormVisible = true;
			this.realtimeDetails.realtimeType = this.transitionType(row.type);
			this.realtimeDetails.realtimeContent = row.content;
			this.realtimeDetails.realtimeTime = row.warningTime;
			this.realtimeDetails.realtimeTerminal = row.terminalName;
			this.realtimeDetails.internalNumber = row.internalNumber;
			this.realtimeDetails.imagePateStr = "https://" + window.location.host + "/images/" + row.imageName;
			this.realtimeDetails.subType = row.subType;
		},
		// 详情中type转文字
		transitionType(value) {
			var text = "";
			if (value == 1) {
				text = "内容";
			} else if (value == 2) {
				text = "运维";
			} else if (value == 3) {
				text = "监控";
			}
			return text;
		},
		// 删除
		handleDelete(index, row) {
			console.log(index, row);
			// this.$msg.info("我是info");
			realtime_delete({
				id: row.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("实时告警删除成功！");
					this.getAllRealtime(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("实时告警删除失败！");
				}
			});
		},
		// 已读和未读——文字样式
		tableCellClassName({ row, columnIndex }) {
			// console.log(row);
			// console.log(rowIndex);
			// console.log(column);
			// console.log(columnIndex);
			if (row.status == 0 && columnIndex == 1) {
				return "forbidden-cell-read";
			}
			if (row.status == 1 && columnIndex == 1) {
				return "forbidden-cell-unread";
			}
			return "";
		},
		// alertBox——详情 关闭
		alertBoxFormclose() {
			this.alertBoxFormVisible = false;
		},
		// alertBox——详情 确认
		handleDetailsConfirm() {
			this.alertBoxFormVisible = false;
		},
		// 发布内容历史记录过滤内容（去掉颜色数值代码）
		contentFilter(value) {
      if (value.indexOf("/root") !== -1) {
        return value;
      }
			let contentStr = "";
			value.split(",").forEach((item) => {
				contentStr += item.split("/")[0] + ",";
			});
			return contentStr.slice(0, -1);
		},
		// 获取全部实时告警
		getAllRealtime(page, size, startDateStr, endDateStr) {
			realtime_all({
				page: page,
				size: size,
				startDateStr: startDateStr,
				endDateStr: endDateStr,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						if (item.imageName) {
							item.imagePateStr = "https://" + window.location.host + "/images/" + item.imageName;
						} else {
							item.content = this.contentFilter(item.content);
						}
					});
					this.tableData = res.data.result;
					this.total = res.data.total;
				} else {
					this.$msg.error("实时告警获取失败！");
				}
			});
		},
		// 搜索实时告警
		getSearchRealtime(page, size, value, startDateStr, endDateStr) {
			realtime_all({
				page: page,
				size: size,
				keyword: value,
				startDateStr: startDateStr,
				endDateStr: endDateStr,
			}).then((res) => {
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						if (item.imageName) {
							item.imagePateStr = "https://" + window.location.host + "/images/" + item.imageName;
						} else {
							item.content = this.contentFilter(item.content);
						}
					});
					this.tableData = res.data.result;
					this.total = res.data.total;
				} else {
					this.$msg.error("实时告警搜索失败！");
				}
			});
		},
		// 批量删除
		handleAll_delete() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					idList.push(item.id);
				});
				console.log(decodeURIComponent(idList));
				realtime_all_delete({
					idList: decodeURIComponent(idList),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("实时告警批量删除成功！");
						this.getAllRealtime(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("实时告警批量删除失败！");
					}
				});
			}
		},
		// 批量标记已读
		handleAll_read() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					idList.push(item.id);
				});
				console.log(decodeURIComponent(idList));
				realtime_all_read({
					idList: decodeURIComponent(idList),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("实时告警批量标记已读成功！");
						this.getAllRealtime(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("实时告警批量标记已读失败！");
					}
				});
			}
		},
		// 批量导出
		handleExport_select() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					idList.push(item.id);
				});
				console.log(decodeURIComponent(idList));
				realtime_export({
					waringIdList: decodeURIComponent(idList),
				})
					.then((res) => {
						console.log(res);
						// if (res.code == 200) {
						this.$msg.success("实时告警批量导出成功！");
						let content = res.data;
						let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
						let fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]); //自定义下载文件的名字
						if ("download" in document.createElement("a")) {
							// 非IE下载
							let elink = document.createElement("a");
							elink.download = fileName;
							elink.style.display = "none";
							elink.href = URL.createObjectURL(blob);
							document.body.appendChild(elink);
							elink.click();
							URL.revokeObjectURL(elink.href); // 释放URL 对象
							document.body.removeChild(elink);
						} else {
							// IE10+下载
							navigator.msSaveBlob(blob, fileName);
						}
						// } else {
						// 	this.$msg.error("实时告警批量导出失败！");
						// }
					})
					.catch((err) => {
						console.log(err);
						this.$msg.error("实时告警批量导出失败！");
					});
			}
		},
		// 全部导出
		handleExport_all() {
			if (this.tableData == null || this.tableData.length <= 0) {
				this.$msg.warning("暂无可导出的数据！");
			} else {
				realtime_export({
					waringIdList: decodeURIComponent([]),
				})
					.then((res) => {
						console.log(res);
						// if (res.code == 200) {
						this.$msg.success("实时告警全部导出成功！");
						let content = res.data;
						let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
						let fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]); //自定义下载文件的名字
						if ("download" in document.createElement("a")) {
							// 非IE下载
							let elink = document.createElement("a");
							elink.download = fileName;
							elink.style.display = "none";
							elink.href = URL.createObjectURL(blob);
							document.body.appendChild(elink);
							elink.click();
							URL.revokeObjectURL(elink.href); // 释放URL 对象
							document.body.removeChild(elink);
						} else {
							// IE10+下载
							navigator.msSaveBlob(blob, fileName);
						}
						// } else {
						// 	this.$msg.error("实时告警全部导出失败！");
						// }
					})
					.catch((err) => {
						console.log(err);
						this.$msg.error("实时告警全部导出失败！");
					});
			}
		},
		// 导出
		handleExport() {
			if (this.tableData == null || this.tableData.length <= 0) {
				this.$msg.warning("暂无可导出的数据！");
			} else {
				if (this.multipleSelection.length <= 0 && this.exportLogsTimeHorizonValue.length <= 0) {
					// 导出全部
					realtime_export({
						waringIdList: decodeURIComponent([]),
						startDateStr: "",
						endDateStr: "",
					})
						.then((res) => {
							console.log(res);
							// if (res.code == 200) {
							this.$msg.success("实时告警全部导出成功！");
							this.actualDownload(res);
						})
						.catch((err) => {
							console.log(err);
							this.$msg.error("实时告警导出失败！");
						});
				} else if (this.multipleSelection.length <= 0 && this.exportLogsTimeHorizonValue.length > 0) {
					// 时间范围导出
					realtime_export({
						waringIdList: decodeURIComponent([]),
						startDateStr: this.exportLogsTimeHorizonValue[0],
						endDateStr: this.exportLogsTimeHorizonValue[1],
					})
						.then((res) => {
							console.log(res);
							this.$msg.success("实时告警时间范围内数据导出成功！");
							this.exportLogsTimeHorizonValue = [];
							this.actualDownload(res);
						})
						.catch((err) => {
							console.log(err);
							this.$msg.error("实时告警导出失败！");
						});
				} else if (this.multipleSelection.length > 0 && this.exportLogsTimeHorizonValue.length <= 0) {
					// 选中导出
					var idList = [];
					this.multipleSelection.forEach((item) => {
						idList.push(item.id);
					});
					realtime_export({
						waringIdList: decodeURIComponent(idList),
						startDateStr: "",
						endDateStr: "",
					})
						.then((res) => {
							console.log(res);
							this.$msg.success("实时告警选中数据导出成功！");
							this.$refs.table_publishContent.clearSelection();
							this.multipleSelection = [];
							this.actualDownload(res);
						})
						.catch((err) => {
							console.log(err);
							this.$msg.error("实时告警导出失败！");
						});
				} else if (this.multipleSelection.length > 0 && this.exportLogsTimeHorizonValue.length > 0) {
					// 时间范围内选中导出
					var idList_ = [];
					this.multipleSelection.forEach((item) => {
						idList_.push(item.id);
					});
					realtime_export({
						waringIdList: decodeURIComponent(idList_),
						startDateStr: this.exportLogsTimeHorizonValue[0],
						endDateStr: this.exportLogsTimeHorizonValue[1],
					})
						.then((res) => {
							console.log(res);
							this.$msg.success("实时告警时间范围内选中数据导出成功！");
							this.exportLogsTimeHorizonValue = [];
							this.$refs.table_publishContent.clearSelection();
							this.multipleSelection = [];
							this.actualDownload(res);
						})
						.catch((err) => {
							console.log(err);
							this.$msg.error("实时告警导出失败！");
						});
				}
			}
		},
		// 实际下载
		actualDownload(res) {
			let content = res.data;
			let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
			let fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]); //自定义下载文件的名字
			if ("download" in document.createElement("a")) {
				// 非IE下载
				let elink = document.createElement("a");
				elink.download = fileName;
				elink.style.display = "none";
				elink.href = URL.createObjectURL(blob);
				document.body.appendChild(elink);
				elink.click();
				URL.revokeObjectURL(elink.href); // 释放URL 对象
				document.body.removeChild(elink);
			} else {
				// IE10+下载
				navigator.msSaveBlob(blob, fileName);
			}
			// 重新查询
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.getAllRealtime(this.pageNum, this.pageSize, "", "");
		},
	},
};
</script>
<style lang="less" scoped>
.realtimeIndexContent {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.strategyMenus {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.strategyMenusBut {
			width: 85%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 8px 18px;
				margin-left: 18px;
				margin-right: 45px;
			}
		}
		.strategyMenusSearch {
			width: 15%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			/deep/ .el-input {
				font-size: 16px;
			}
		}
	}
	.strategyList {
		width: 100%;
		height: calc(100% - 48px - 48px);
		padding: 28px 0;
		box-sizing: border-box;
		/deep/ .el-table {
			border-left: 1px solid #ebeef5;
			border-right: 1px solid #ebeef5;
			border-top: 1px solid #ebeef5;
		}
		/deep/ .el-link {
			margin: 0 12px 0 0;
		}
		/deep/ .el-table .forbidden-cell-read .cell {
			color: #f56c6c;
		}
		/deep/ .el-table .forbidden-cell-unread .cell {
			color: #67c23a;
		}
	}
	.strategyPage {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
